---
title: الصور الرمزية المخصصة
description: تخصيص صورة المستخدم الرمزية لتطبيقك
---

# الصور الرمزية المخصصة

## تخصيص صورة المستخدم الرمزية لتطبيقك

نحن نوفر بصورة افتراضية صورة رمزية للمستخدمين في حال لم يتم تعيين صورة ENS الخاصة بهم، ولكن يمكنك تخصيص ذلك عن طريق تقديم مكون الصورة الرمزية الخاص بك. يمكنك استيراد النوع `AvatarComponent` إذا كنت تستخدم TypeScript:

```tsx
import {
  RainbowKitProvider,
  AvatarComponent,
} from '@rainbow-me/rainbowkit';
import { generateColorFromAddress } from './utils';

const CustomAvatar: AvatarComponent = ({ address, ensImage, size }) => {
  const color = generateColorFromAddress(address);
  return ensImage ? (
    <img
      src={ensImage}
      width={size}
      height={size}
      style={{ borderRadius: 999 }}
    />
  ) : (
    <div
      style={{
        backgroundColor: color,
        borderRadius: 999,
        height: size,
        width: size,
      }}
    >
      :^)
    </div>
  );
};

const App = () => {
  return (
    <RainbowKitProvider avatar={CustomAvatar} {...etc}>
      {/* ... */}
    </RainbowKitProvider>
  );
};
```

يتم تمرير `AvatarComponent` إلى خاصية `avatar` بأنواع الخصائص التالية: `<{ address: string; ensImage?: string | null; size: number;}>`
